<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="json-import__wrapper">
    <el-upload class="upload-demo" style="width:480px;" multiple drag :file-list="uploadFiles" :beforeUpload="beforeUpload" :http-request="componentImport" accept=".json">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text" style="text-align: center;">
        将文件拖拽至此处或点击上传<br>
        支持上传json格式的文件<br>
      </div>
    </el-upload>
    <el-link type="primary" @click="downloadTemplate">模板下载</el-link>
  </div>
</template>
<script setup name="TabsModel">
import { downloadFile } from '@/utils/index';
import { getModelTemplateByModelId } from '@/api/dataAcquisition';
const uploadFiles = [];
const modelId = ref('');
// 下载模板
const downloadTemplate = () => {
  getModelTemplateByModelId({modelId: modelId.value}).then(res => {
    // if (res) {
      downloadFile(res, `数据导入模板`, 'json');
    // }
  })
}
// 获取模型id
const handleData = (id) => {
  console.log('handleId', id)
  modelId.value = id
}
// 读取json文件
const componentImport = async (file, fileList) => {
  console.log(file, fileList)
  uploadFiles.push(file.file);
};
// 验证文件格式是否正确
const beforeUpload = (file) => {
  let isFile = file.name.split('.')[file.name.split('.').length - 1] == 'json';
  const isLt = file.size / 1024 / 1024 < 500;
  if (!isFile) {
    ElMessage.error('导入文件格式不正确');
    return false;
  }
  if (!isLt) {
    ElMessage.error(`导入文件太大，请交由系统管理员进行处理`);
    return false;
  }
  //清空filelista
  uploadFiles = [];
  return isFile;
};
defineExpose({
  uploadFiles,
  handleData
});
</script>
<style lang="scss" scoped>
.json-import__wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 50px 0;
  .el-upload__text {
    font-size: 14px;
  }
}
</style>
